<!DOCTYPE html>
<html>
<head>
    <title></title>
    <#include "/header.html">

    <link href="${request.contextPath}/statics/plugins/select2/select2.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/oss/style.css">
    <script type="text/javascript" src="${request.contextPath}/statics/plugins/oss/js/plupload.full.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/statics/plugins/oss/ziyun_library.js"></script>
    <script src="${request.contextPath}/statics/plugins/select2/select2.min.js"></script>

    <!-- CK Editor -->
    <script src="${request.contextPath}/statics/plugins/ckeditor/ckeditor.js"></script>
    <!-- 二维码 -->
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
</head>
<body>
<div id="zyDemo">
	<el-row>
  		<el-button @click="buttonClick">默认按钮</el-button>
	</el-row>

    <div id="qrcode"></div>
    <el-time-select
            v-model="testData"
            :picker-options="{
      start:'08:30',
      step:'00:15',
      end:'18:30'
  }"
            placeholder="选择时间"
    ></el-time-select>
    <div class="box box-info">
        <div class="box-header">
        </div>
        <!-- /.box-header -->
        <div class="box-body pad">
            <form>
                    <textarea id="editor1" name="editor1"  rows="10" cols="80">
                                           {{text}}
                    </textarea>
            </form>
        </div>
    </div>


    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#home" data-toggle="tab">
                组件
            </a>
        </li>
        <li><a href="#ios" data-toggle="tab">iOS</a></li>
        <li class="dropdown">
            <a href="#" id="myTabDrop1" class="dropdown-toggle"
               data-toggle="dropdown">Java
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
                <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
            </ul>
        </li>
    </ul>

    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="home">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">开关组件</h3>
                </div>
                <div class="box-body">
                    <!--开关组件-->
                    <input class="switch" type="checkbox" checked/>
                    <el-switch v-model="formData.flag"   active-text="否"
                               inactive-text="是"></el-switch>
                </div>
            </div>

            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">下拉搜索组件</h3>
                </div>
                <div class="box-body">
                    <!--下拉搜索select2-->
                    <!--   <select class="js-example-basic-single" name="state" style="width: 200px">
                           <option  value="item.value" v-for="item in optionList">{{ item.name }}</option>
                       </select>-->
                    <zy-select2 :items="optionList" v-model="formData.test" ></zy-select2>
                    <zy-select2 :items="optionList" :multiple="true"  v-model="formData.test2"></zy-select2>

                    <!--   <select class="js-example-basic-multiple" multiple="multiple" name="state" style="width: 200px">>
                           <option  value="item.value" v-for="item in optionList">{{ item.name }}</option>
                       </select>-->
                    <el-select v-model="formData.test" filterable placeholder="请选择" size="small">
                        <el-option
                                v-for="item in optionList"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select
                            v-model="formData.test2"
                            multiple
                            filterable
                            allow-create
                            default-first-option
                            placeholder="请选择文章标签">
                        <el-option
                                v-for="item in optionList"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value">
                        </el-option>
                    </el-select>

                    <el-date-picker size="small" @change="changeData"
                                    v-model="formData.date"
                                    type="date"
                                    placeholder="选择日期">
                    </el-date-picker>

                </div>
            </div>

            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">下载组件</h3>
                </div>
                <div class="box-body">
                    <!--下载组件-->
                    <a class="btn btn-primary btn-sm" id="upload"><i class="fa fa-plus"></i>&nbsp;上传文件</a>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="ios">

        </div>
        <div class="tab-pane fade" id="jmeter">
            <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
        </div>
        <div class="tab-pane fade" id="ejb">
            <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
            </p>
        </div>
    </div>


</div>

<div id="el">
    <p>选中的: {{ selected }}</p>
    <select2 :options="options" v-model="selected" style="width: 200px"></select2>
</div>

<script src="${request.contextPath}/statics/js/modules/demo/demo.js?_${.now?long}"></script>
<!--<script>-->
    <!--$(function () {-->
        <!--CKEDITOR.replace('editor1')-->
        <!--$('.textarea').wysihtml5()-->
    <!--})-->
<!--</script>-->

</body>